<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow: hidden;">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>项目监管人员-选择人员</title>
	<%@ include file="/WEB-INF/jsp/kt/common/inc.jsp" %>
	<script type="text/javascript" src="${_resources}js/jquery.ztree.core.js"></script>
	<link rel="stylesheet" href="${_resources}css/zTreeStyle.css" type="text/css">
	<link href='${_resources}css/style.css' type='text/css' rel='stylesheet' />
	<link rel="stylesheet" href="${_resources}css/reset.css" type="text/css" />
	<%-- <script type="text/javascript" src="${_resources}js/zUI.js"></script> --%>
	<style type="text/css">

		.ztree li span.button.ico_open,.ztree li span.button.ico_docu,.ztree li span.button.ico_close{width:0px}
		#main-left{border:0px}
		.selectPersonnel_select2 input{display:none;
			filter:alpha(opacity=0);  /* ie 有效*/
			-moz-opacity:0; /* Firefox  有效*/
			opacity: 0; /* 通用，其他浏览器  有效*/}
		.ztree{color:#999}
		.ztree li span{color:#999}
		.selectPersonnel{width:680px;
			height:180px;
			overflow:hidden;}
		.main_left{overflow-x: hidden;}
		.zUIpanelScrollBox,.zUIpanelScrollBar{
			width:5px;
			top:4px;
			right:2px;
			border-radius:5px;
			display:block;
		}
		.zUIpanelScrollBox{
			background:#c5c5c5;opacity:0.3;
			filter:alpha(opacity=30);
		}
		.zUIpanelScrollBar{
			background:#c5c5c5;opacity:0.8;
			filter:alpha(opacity=80);
		}
		.main_right {
			position: absolute;
			left: 170px;
			top: 0;
			bottom: 0;
			z-index: 1000;
			height: 100%;
			width: 460px;
		}
		.main_left #treeDemo{overflow-x: hidden;}
		.ztree {margin-left: 12px;}
		.main_right{border-left:0px}
		.selectPersonnel_select2{margin:0}
		.selectPersonnel_select1 p{margin: 8px;}
		.selectPersonnel_div4{margin-left:0;}
		.selectPersonnel_select1{margin-left:0; widht:330px;}
		.selectPersonnel_select1 p{margin: 5px;}
		.selectPersonnel_select2 p{margin: 3px;}
		.selectPersonnel_div1{margin-left: 0px;text-align: center;}
		.selectPersonnel_div2{width: 308px;}
		.selectPersonnel_div4{width: 120px;}
		.selectPersonnel_div1{font-size: 16px;}
		.ztree li a,.ztree .level_0 a.curSelectedNode{padding: 3px 3px 0 0;}
	</style>
</head>
<script type="text/javascript">
	if (!Array.prototype.indexOf){
		Array.prototype.indexOf = function(elt /*, from*/){
			var len = this.length >>> 0;
			var from = Number(arguments[1]) || 0;
			from = (from < 0)
					? Math.ceil(from)
					: Math.floor(from);
			if (from < 0)
				from += len;
			for (; from < len; from++)
			{
				if (from in this &&
						this[from] === elt)
					return from;
			}
			return -1;
		};
	}

	var userListHtml="";
	var userIdList="";
	var userNameList="";
	var selectUserList = [];
	var managerIdSplit = "";
	var checkedHtml = "";
	
	$(function (){
		var managerIds = "${managerId}";
		managerIdSplit = managerIds.split(",");

		$("#close").click(function (){
			parent.closeWin();
		});

		$("#allDelFun").click(function (){
			userListHtml="";
			userIdList="";
			userNameList="";
			$("#userList").html(userListHtml);
		});

		$("#delFun").click(function (){
			parent.closeWin();
		});

		$("#searchValue").keydown(function(event) {//给输入框绑定按键事件
			if(event.keyCode == "13") {//判断如果按下的是回车键则执行下面的代码
				search();
			}
		});

		$("#search").click(function (){
			search();
		});
	})

	var setting = {
		view: {
			showLine: true,
			selectedMulti: false,
			addDiyDom: addDiyDom,
			showIcon: showIconForTree
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onNodeCreated: this.onNodeCreated,
			onClick: onClick
		}

	};
	var zNodes = eval("${zNodes}");

	$(function (){
		var tree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

		var nodes = tree.transformToArray(tree.getNodes());
		for(var lt=0;lt<nodes.length;lt++){
			var node = nodes[lt];
			var nodeName = node.name;
			//if(nodeName == "所有部门"){
			if(lt==0){
				tree.setting.callback.onClick(null, tree.setting.treeId, node);//触发函数
			}

			//}
		}
	});
	function addDiyDom(treeId, treeNode) {
		var liObj = $("#" + treeNode.tId);
		var aObj = $("#" + treeNode.tId + "_span");
		liObj.addClass("level_"+treeNode.level);
		aObj.addClass("le_"+treeNode.level);
	};

	if (!Array.prototype.indexOf){
		Array.prototype.indexOf = function(elt /*, from*/){
			var len = this.length >>> 0;
			var from = Number(arguments[1]) || 0;
			from = (from < 0)
					? Math.ceil(from)
					: Math.floor(from);
			if (from < 0)
				from += len;
			for (; from < len; from++)
			{
				if (from in this &&
						this[from] === elt)
					return from;
			}
			return -1;
		};
	}
	function showIconForTree(treeId, treeNode) {
		return !treeNode.isParent;
	};
	var userData = "";
	function onClick(e,treeId, treeNode){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.expandNode(treeNode);
		var path = "";
		if("${set_document_departId}" != ''){
			path="${_baseUrl}/userController/selectDepartUser?set_document_departId=${set_document_departId}";
		}else if("${source}" != ''){
			path="${_baseUrl}/userController/selectDepartUser?source=${source}";
		}else{
			path="${_baseUrl}/userController/selectDepartUser";
		}

		$.ajax({
			type: "POST",
			async: false,
			url:path,
			data:{
				"departId":treeNode.id
			},
			dataType:"json",
			success: function (data) {
				userData = data;
				var obj = JSON.stringify(data);
				innerHtml="";
				if(obj=="[]"){
					innerHtml+="";
				}else{
					for(var i=0;i<data.length;i++){
						var index = managerIdSplit.indexOf(data[i].id);
						if(managerIdSplit.indexOf(data[i].id) >= 0){
							innerHtml+="<p class=\"pick\"><input checked='checked' name='"+treeNode.id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].id+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
							//判断如果右侧已存在，则不需要在加入
							var flag = true;
							for(var ii=0;ii<selectUserList.length;ii++){
								var obj = JSON.parse(selectUserList[ii]);
								if(data[i].id == obj.id){
									flag = false;
								}else{
								}
							}
							if("${docManager}" ==data[i].id){
								flag =false;
							}
							if(flag){
								selectUserList.push("{\"userId\":\""+data[i].userId+"\",\"userName\":\""+data[i].userName+"\",\"id\":\""+data[i].id+"\"}");
								managerIdSplit.push();
								var html = "<p class=\"pick\" id='p_"+data[i].id+"'><input type='hidden' id='userId' name='userId' value='"+data[i].userId+"'/><input type='hidden' id='userName' name='userName' value='"+data[i].userName+"'/><input name='"+treeNode.id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"delSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
								$("#selectUser").append(html);
							}

						}else{
							if("${docManager}" !=data[i].id){
								innerHtml+="<p><input name='"+treeNode.id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].id+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
							}
						}
					}
				}
				$("#userList").children("p").remove();
				$("#userList").append(innerHtml);

				//默认选中右侧已有人员
				for(var i=0;i<selectUserList.length;i++){
					var obj = JSON.parse(selectUserList[i]);
					$("#"+obj.id).attr("checked",true);
				}

			}
		});
	}

	function disabledNode(e) {
		var zTree = $.fn.zTree.getZTreeObj("tree"),
				disabled = e.data.disabled,
				nodes = zTree.getSelectedNodes();
		if (nodes.length == 0) {
			layer.msg("请先选择一个节点");
		}

		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.setChkDisabled(nodes[i], disabled);
		}
	}

	/* 选择一个节点添加到右侧 */
	function addSelectUser(userId,userName,id,o){
		
		if('${inputId}' == 'receiver'){
			var $this = $(o).parent();
			if($(o).is(':checked')){
				if($this.siblings(".pick").length>0){
					$this.siblings(".pick").removeClass("pick");
				};
				$this.addClass("pick");
			}else{
				$this.removeClass("pick");
			}
		}else{
			if($(o).is(':checked')){
				$(o).parent().addClass("pick");
			}else{
				$($(o).parent()).removeClass("pick");
			}
		}
		var userHtml = $("#selectUser").html();
		if($("#"+id).is(":checked")){
			var html = "<p class=\"pick\" id='p_"+id+"'><input type='hidden' id='userId' name='userId' value='"+userId+"'/><input type='hidden' id='userName' name='userName' value='"+userName+"'/><input name='"+id+"_chk' id='"+id+"' value='"+userName+"' type='checkBox' onClick=\"delSelectUser('"+userId+"','"+userName+"','"+id+"',this);\">"+userName+"</p>";
			if(userHtml.indexOf(userId)>=0){

			}else{
				if('${inputId}' == 'receiver'){
					selectUserList.length=0;
					$("#selectUser").html("");
				}
				selectUserList.push("{\"userId\":\""+userId+"\",\"userName\":\""+userName+"\",\"id\":\""+id+"\"}");
				managerIdSplit.push(id);
				$("#selectUser").append(html);
			}
		}else{
			for(var i=0;i<selectUserList.length;i++){
				var obj = JSON.parse(selectUserList[i]);
				if(id == obj.id){
					$("#p_"+id).remove();
					//从当前坐标开始,向后删除一个
					selectUserList.splice(i,1);
				}
			}
			for(var j=0;j<managerIdSplit.length;j++){
				if(id == managerIdSplit[j]){
					managerIdSplit.splice(j,1);
				}
			}
		}
	}
	/* 点击右侧移除选中事件*/
	function delSelectUser(userId,userName,id,o){
		$($("#"+id).parent()).removeClass("pick");
		for(var i=0;i<selectUserList.length;i++){
			var obj = JSON.parse(selectUserList[i]);
			if(id == obj.id){
				$("#p_"+id).remove();
				//从当前坐标开始,向后删除一个
				selectUserList.splice(i,1);
			}
		}
		for(var j=0;j<managerIdSplit.length;j++){
			if(id == managerIdSplit[j]){
				managerIdSplit.splice(j,1);
			}
		}
	}


</script>
<body style="overflow: hidden;">
<div id="selectPersonnel">
	<div id="selectPersonnel1" style="width:170px;height:190px;">
		<div id="main-left" class="zTreeDemoBackground main_left" style="overflow-x: hidden;height:190px;">
			<div class="selectPersonnel_div1" style="margin-left: 30px;">组织结构</div>
			<div class="left_menu_tree">
				<ul id="treeDemo" class="ztree "></ul>
			</div>
		</div>
	</div>
	<div id="main-right" class="main_right">
		<div class="selectbox">
			<div id="selectPersonnel2" style="width:315px;height:190px;overflow-y:auto;overflow-x: hidden;float:left;border-left:5px solid #ddd">
				<div class="selectPersonnel_div2 fl">
					<div class="selectPersonnel_div1">人员列表</div>
					<div class="selectPersonnel_select1"  multiple="multiple" id="userList" style="width:290px;margin-left: 2px;">
					</div>
				</div>
			</div>
			<div id="selectPersonnel3" style="width:144px;height:190px;overflow-y:auto;overflow-x: hidden;float:left;border-left:5px solid #ddd">
				<div class="selectPersonnel_div4 fr"  style="text-align: center;">
					<div class="selectPersonnel_div1">已选列表</div>
					<div class="selectPersonnel_select2" multiple="multiple" id="selectUser">

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	/* $(function(){
		$("#selectPersonnel1").mouseover(function(){
			$("#selectPersonnel1").css("border","0px");
		});
		$("#selectPersonnel1").panel({iWheelStep:32});
	});
	$(function(){
		$("#selectPersonnel2").mouseover(function(){
			$("#selectPersonnel2").css("border","0px");
		});
		$("#selectPersonnel2").panel({iWheelStep:32});
	});
	$(function(){
		$("#selectPersonnel3").panel({iWheelStep:32});
	});
 */

	/* 父界面点击保存时调用的方法 */
	function save(){
		var inputId='${inputId}';
		var stringJson = "["+selectUserList.join(",")+"]";
		if(inputId == "manager" || inputId == "charge" || inputId == "project_manager"){
			if(stringJson.indexOf("},{") >= 0){
				if(inputId == "manager"){
					layer.msg("您只能选择一个部门管理人");
				}else{
					layer.msg("您只能选择一个负责人");
				}
				return;
			}else if(stringJson.length == 2){
				parent.parent.setUserIdAndName(stringJson,inputId);
				parent.parent.closeWin();
			}
		}

		parent.parent.setUserIdAndName(stringJson,inputId);
		if(inputId == 'departRoleUser'){
			parent.parent.saveRoleByDepartment();
		}
		parent.parent.closeWin();
	}

	function search(value){
		var path="${_baseUrl}/userController/selectDepartUser?set_document_departId=${set_document_departId}";
		$.ajax({
			type: "post",
			async: false,
			url:path,
			data:{
				"value":value
			},
			dataType:"json",
			success: function (data) {
				var obj = JSON.stringify(data);
				innerHtml="";
				if(obj=="[]"){
					innerHtml+="";
				}else{
					var tree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
					var nodes = tree.transformToArray(tree.getNodes());
					if(value==''){
						tree.selectNode(tree.getNodeByParam("id",nodes[0].id,null));//选中指定节点
					}else{
						var count = 0;
						var depId ="";
						for(var i=0;i<data.length;i++){
							if(depId ==""){
								depId  = data[i].departId;
								count++;
							}else{
								if(depId !=data[i].departId){
									count++;
								}
							}
						}
						if(count>1){
							tree.selectNode(tree.getNodeByParam("id",nodes[0].id,null));//选中指定节点
						}else{
							if(data[0].departId ==null||data[0].departId =="null"||data[0].departId==""){
								tree.selectNode(tree.getNodeByParam("id",nodes[0].id,null));//选中指定节点
							}else{
								tree.selectNode(tree.getNodeByParam("id",depId,null));//选中指定节点
							}
						}
					}
					for(var i=0;i<data.length;i++){
						var index = managerIdSplit.indexOf(data[i].id);
						if(managerIdSplit.toString().indexOf(data[i].id) >= 0){
							innerHtml+="<p><input checked='checked' name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].id+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
							//判断如果右侧已存在，则不需要在加入
							var flag = true;
							for(var ii=0;ii<selectUserList.length;ii++){
								var obj = JSON.parse(selectUserList[ii]);
								if(data[i].id == obj.id){
									flag = false;
								}else{
									if("${docManager}"==data[i].id){
										flag =false;
									}
								}
							}
							if(flag){
								selectUserList.push("{\"userId\":\""+data[i].userId+"\",\"userName\":\""+data[i].userName+"\",\"id\":\""+data[i].id+"\"}");
								var html = "<p id='p_"+data[i].id+"'><input type='hidden' id='userId' name='userId' value='"+data[i].userId+"'/><input type='hidden' id='userName' name='userName' value='"+data[i].userName+"'/><input name='"+id+"_chk' id='"+id+"' value='"+userName+"' type='checkBox' onClick=\"delSelectUser('"+userId+"','"+userName+"','"+id+"',this);\">"+data[i].userName+"</p>";
								$("#selectUser").append(html);
							}

						}else{
							if("${docManager}" !=data[i].id){
								innerHtml+="<p><input name='"+data[i].departId+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].id+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
							}
						}
					}
				}
				$("#userList").children("p").remove();
				$("#userList").append(innerHtml);

				//默认选中右侧已有人员
				for(var i=0;i<selectUserList.length;i++){
					var obj = JSON.parse(selectUserList[i]);
					$("#"+obj.id).attr("checked",true);
				}

			}
		});
	}
	

</script>
</html>